<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>video测试</title>
		<style>
			video {
				display: flex;
			}
			
			.test_video {
				/*height: 4.2rem;*/
				margin-bottom: 1rem;
			}
			.btn{
				width: 3rem;
				height: 1rem;
				border: 1px solid red;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				font-size: .4rem;
			}
		</style>
	</head>

	<body>
		<div>
			<!--controls="controls"-->
			<video 
				id='videoId'
				class="test_video"
				width="100%" 
				ref='videoRef' 
				height="30%" 
				x5-video-orientation="portraint" 
				webkit-playsinline="true" 
				playsinline=""
				x5-playsinline="" 
				x-webkit-airplay="allow"
				@pause="pauseVideo" 
				@playing='playIngVideo'
				src="https://shipin.zxwstong.net/%E7%87%95%E6%95%99%E6%8E%88%E4%BA%A7%E5%93%81%E8%AF%A6%E8%A7%A3.mp4.m3u8"
				preload="" 
				style="position:inherit;width:100%;">
			</video>
			<!--https://www.w3school.com.cn//i/movie.ogg-->
			
			<div onclick="csBtn()" class="btn">安卓测试播放按钮</div>
		</div>
		<script src="js/auto-size.js"></script>
		<script src="js/zepto.min.js"></script>
		<script>
			
			function csBtn(){
				var doc = document.getElementById('videoId')
				doc.play();
				doc.pause();
				setTimeout(function(){
					doc.setAttribute('controls','controls')
					doc.play();
				},2000)
			}
		</script>
	</body>

</html>